<template>
	<view class="bg-white">
		<view class="title_box align-start bg-cyan" v-if="book_data">
			<view class="title-image">
				<image :src="book_data.book_thumb" mode="aspectFit"></image>
			</view>
			<view class="margin-top title-title">
				<view>
					<text style="font-weight: bold; font-size: 30rpx;">{{book_data.title}}</text>
				</view>
				<view class="margin-top">
					<text style="font-size: 30rpx;">{{book_data.author}} / {{book_data.publishing_house}}</text>
				</view>
				<view class="margin-top">
					<text>图书标号：{{book_id}}</text>
				</view>
<!-- 				<view class="margin-top">
					<button size="mini" v-if="!book_data.ordered" @click="orderBook">借阅</button>
					<button size="mini" v-if="book_data.ordered&&book_data.uid==uid" @click="returnBook">归还</button>
					<button class="bg-red" size="mini" v-if="book_data.ordered&&book_data.uid!=uid">已借出</button>
				</view> -->
			</view>
		</view>
		<view class="bg-white padding">
			<view class="text-lg text-bold solids-bottom" style="padding: 10rpx 0 15rpx 10rpx; color: #39B54A;">简介</view>
			<view v-if="description_overflow">
				<text v-if="!description_showMore">{{book_data.description.slice(0,250)}}_</text>
				<text class="text-bold" style="color: #FF0000;" @click="switchShowMore" v-if="!description_showMore">展开</text>
				<text v-if="description_showMore">{{book_data.description}}</text>
				<text class="text-bold" style="color: #FF0000;" @click="switchShowMore" v-if="description_showMore">收起</text>
			</view>
			<view v-if="!description_overflow">
				<text>{{book_data.description}}</text>
			</view>
		</view>

		<view class="bg-white padding" v-if="nwhere">
			<view class="flex justify-between align-center" style="padding: 0rpx 0rpx 0rpx 0rpx;">
				<view class="text-lg text-bold" style="padding: 0 0 0rpx 0; color: #39B54A;">书评</view>
				<view>
					<button class="cu-btn round iconfont" size="mini" style="margin: 0 0 15rpx 0;" @click="addReadingNotes()">&#xe69b;我要写书评</button>
				</view>

			</view>
			<!-- 读后感数据库信息抓取 -->
			<unicloud-db ref="notes_db" v-slot:default="{data, loading, error, options}" :options="formData" collection="library-reading-notes"
			 :where="nwhere" orderby="likes.length desc">
				<uni-list>
					<uni-list-item direction="column" v-for="item in data" :key="item._id" :to="'../readingNotesDetail?book_id='+item.book_id+'&rid='+item._id">
						<template slot="header">
							<view class="flex align-center">
								<view class="cu-avatar round" :style="'background-image:url('+item.avatar+');'"></view>
								<view class="margin-left">{{item.nickname}}</view>
							</view>
						</template>
						<template slot="footer">
							<view>
								<text class="text-grey" v-if="item.reading_notes.length<=80">{{item.reading_notes}}</text>
								<text class="text-grey" v-else style="height: 120rpx; display: inline-block; overflow: hidden;">{{item.reading_notes}}</text>
							</view>
							<view class="flex justify-end">
								<text class="cuIcon-appreciatefill text-red"></text>
								<text>{{item.likes.length}}</text>
							</view>
						</template>
					</uni-list-item>

				</uni-list>
				<uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" />
			</unicloud-db>
		</view>
		<view>
			<view class="cu-bar btn-group foot" v-if="!hasJoined">
				<button class="cu-btn bg-blue shadow-blur round lg main-btn" v-if="!book_data.ordered" @click="orderBook">借阅</button>
				<button class="cu-btn bg-blue shadow-blur round lg sub-btn" v-if="book_data.ordered&&book_data.uid==uid" @click="returnBook">归还</button>
				<button class="cu-btn bg-blue shadow-blur round lg sub-btn" v-if="book_data.ordered&&book_data.uid!=uid">已借出</button>
			</view>
			
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database();
	const app = getApp();
	import utils from '@/common/utils.js';
	import shareMsg from '@/common/shareMessage.js';
	export default {
		data() {
			return {
				book_id: "",
				book_data: null,
				description_overflow: false,
				description_showMore: false,
				uid: "",
				nwhere: null,
				formData: {
					status: 'loading', // 加载状态
				}
			}
		},
		onShareAppMessage() {
			var pathList = getCurrentPages()
			var path = pathList[pathList.length - 1].route
			return shareMsg.shareMsg({
				title: "AIIT图书馆",
				path: path+"?book_id=" + this.book_id,
				imageUrl: ''
			})
		},
		onLoad: function(e) {
			if (!app.globalData.hasLogin) {
				uni.showModal({
					title: "请先登录",
					mask: true,
					success: (res) => {
						if(res.confirm){
							uni.switchTab({
								url:"/pages/profile/profile"
							})
						} else {
							uni.navigateBack({
								delta: 1
							})
						}
					}
				});
			}
			
			uni.showLoading({
				title: "加载中",
				mask: true
			});
			this.uid = app.globalData.uid
			this.book_id = e.book_id;
			uni.setNavigationBarTitle({
				title: e.title
			});
			this.nwhere = "isApproval==true&&book_id=='"+this.book_id+"'";
			this.loadData();
		},
		onPullDownRefresh() {
			this.tipShow = true
			this.formData.status = 'more'
			this.$refs.notes_db.loadData({
				clear: true
			}, () => {
				this.tipShow = false
				uni.stopPullDownRefresh()
			})
		},
		/**
		 * 上拉加载回调函数
		 */
		onReachBottom() {
			this.$refs.notes_db.loadMore()
			console.log("load more")
		},
		methods: {
			load(data, ended) {
				if (ended) {
					this.formData.status = 'noMore'
				}
			},

			loadData: function(e) {
				db.collection("library-books").where({
					book_id: this.book_id
				}).get().then(res => {
					this.book_data = res.result.data[0];
					if (this.book_data.description.length > 250) {
						this.description_overflow = true
					}
					this.$refs.notes_db.loadData({clear:true});
					uni.hideLoading();
				});
			},

			switchShowMore: function(e) {
				this.description_showMore = !this.description_showMore;
			},

			orderBook: function(e) {
				// 检查用户信息是否完整
				utils.checkUserInfo()
				.then(()=> {
					uni.showModal({
						title: "借阅时长一个月",
						success: (res) => {
							res.confirm && this.storeOrderInfo()
						}
					})
				})
				.catch(err => {
					uni.showModal({
						content: '请先完善个人信息',
						complete: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/profile/userDetail'
								})
							} else {
								uni.navigateBack({
									delta: 1
								})
							}
						}
					})
				});
				
			},

			storeOrderInfo: function(e) {
				// const time = new Date();
				db.collection("library-books").where({
					book_id: this.book_id
				}).update({
					ordered: true,
					uid: this.uid,
					order_count: this.book_data.order_count + 1
				});
				db.collection("library-orders").add({
					book_id: this.book_id,
					date_of_return: new Date().getTime() + 2592000000
				}).then(res => {
					uni.showToast({
						title: "借阅成功"
					});
					this.loadData();
				})
			},

			returnBook: function(e) {
				db.collection("library-books").where({
					book_id: this.book_id
				}).update({
					ordered: false,
					uid: ""
				});
				db.collection("library-orders").where({
					uid: this.uid,
					returned: false
				}).update({
					returned: true
				}).then(res => {
					uni.showToast({
						title: "归还成功"
					});
					this.loadData();
				})
			},
			
			addReadingNotes: function(e) {
				// 检查用户信息是否完整
				utils.checkUserInfo()
				.then(()=> {
					uni.navigateTo({
						url: "../addReadingNotes?book_id=" + this.book_id + "&title=" + this.book_data.title
					})
				})
				.catch(err => {
					uni.showModal({
						content: '请先完善个人信息',
						complete: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/profile/userDetail'
								})
							} else {
								uni.navigateBack({
									delta: 1
								})
							}
						}
					})
				});
				
			}
		}
	}
</script>

<style>
	.title_box {
		display: flex;
		align-items: flex-start;
		justify-content: center;
	}

	.title-image {
		flex: 1;
		position: relative;
		width: 30%;
		top: -60rpx;
		margin: 20rpx;
	}

	.title-title {
		flex: 2;
	}
	
	.cu-bar.foot {
		position: fixed;
		width: 100%;
		bottom: 50rpx;
		z-index: 1024;
		box-shadow: 0 -1upx 6upx rgba(0, 0, 0, 0);
	}
</style>
